<template>
	<view class="changeInfo">
		<view class="nav-box">
			<view class="title">编辑个人资料</view>
			<navigator open-type="switchTab" url="/pages/personal/personal" class="iconfont iconfanhui icon-nav">
			</navigator>
		</view>
		<view class="box">
			<view class="img-box">
				<image class="img" :src="Array.isArray(src) ? src[0] : `http://localhost:8080${src}`"
					@click="chooseImg"></image>
				<view class="text">点击更换头像</view>
			</view>
		</view>
		<view class="info-box">
			<!-- 昵称输入框 -->
			<view class="text-box">
				<view class="left">昵称</view>
				<input class="input" v-model="user.nickName" placeholder="请输入昵称" />
			</view>
			<!-- 手机号输入框 -->
			<view class="text-box">
				<view class="left">手机号</view>
				<input class="input" v-model="user.phonenumber" placeholder="请输入手机号" />
			</view>
			<!-- 邮箱输入框 -->
			<view class="text-box">
				<view class="left">邮箱</view>
				<input class="input" v-model="user.email" placeholder="请输入邮箱" />
			</view>
			<view class="info-box">
				<view class="text-box">
					<view class="left">性别</view>
					<radio-group class="radio-group" @change="bindSexChange">
						<view v-for="(item, index) in sexOptions" :key="index" class="radio-container">
							<radio :value="item.value" :checked="user.sex === item.value" class="radio"></radio>
							<text class="radio-label">{{ item.label }}</text>
						</view>
					</radio-group>
				</view>
			</view>
			<button class="text-box password-box" @click="showChangePasswordDialog">
				<view class="left" style="color: aqua; margin-left: 40px;">点击修改密码</view>
				<view class="iconfont iconchangyongicon- icon-box"></view>
			</button>

			<view class="button-box">
				<button type="primary" @click="saveUserInfo">保存</button>
				<button type="default" @click="goBack">返回</button>
			</view>
		</view>
		<!-- 修改密码对话框 -->
		<view v-if="showPasswordDialog" class="password-dialog">
			<view class="dialog-content">
				<view class="dialog-title">修改密码</view>
				<view class="dialog-input-group">
					<view class="dialog-label">旧密码：</view>
					<input v-model="oldPassword" placeholder="请输入旧密码" type="password" class="dialog-input" />
				</view>
				<view class="dialog-input-group">
					<view class="dialog-label">新密码：</view>
					<input v-model="newPassword" placeholder="请输入新密码" type="password" class="dialog-input" />
				</view>
				<view class="dialog-input-group">
					<view class="dialog-label">确认密码：</view>
					<input v-model="confirmPassword" placeholder="确认密码" type="password" class="dialog-input" />
				</view>
				<view class="dialog-buttons">
					<button @click="changePassword">确认</button>
					<button @click="hidePasswordDialog">取消</button>
				</view>
			</view>
			<view class="mask" @click="hidePasswordDialog"></view> <!-- 遮罩层 -->
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo,
		updateUserProfile,
		updateUserPwd,
		uploadAvatar
	} from '../../api/my/user.js';
	export default {
		data() {
			return {
				showPasswordDialog: false, // 新增状态，控制对话框显示
				oldPassword: '',
				newPassword: '', // 存储新密码
				confirmPassword: '', // 存储确认密码
				src: this.$store.state.user.avatar,
				user: {
					userName: "张三",
					userId: "123435",
					intrduction: "我爱睡觉",
					school: "",
					sex: "0", // 改为字符串
					birthday: '',
					city: ''
				},
				sexOptions: [{
						label: "男",
						value: "0"
					}, // 改为字符串
					{
						label: "女",
						value: "1"
					} // 改为字符串
				],
			};
		},
		mounted() {
			this.queryInfo();
		},
		methods: {
			chooseImg() {
				uni.chooseImage({
					count: 1, // 选择1张图片
					sizeType: ["compressed"], // 压缩图片
					sourceType: ["album", "camera"], // 支持相册和拍照
					success: (res) => {
						const filePath = res.tempFilePaths[0];
						this.uploadImg(filePath); // 上传图片
					},
					fail: () => {
						uni.showToast({
							title: "取消选择头像",
							icon: "none",
						});
					},
				});
			},

			uploadImg(filePath) {
				uploadAvatar(filePath)
					.then((res) => {
						if (res.code === 200) {
							this.src = res.imgUrl; // 更新头像 URL
							this.$store.dispatch('user/setUserInfo', {
								avatar: this.src,
							});
							uni.showToast({
								title: "头像修改成功",
								icon: "success",
							});
						} else {
							uni.showToast({
								title: res.msg || "头像修改失败",

								icon: "none",
							});
						}
					})
					.catch((error) => {
						console.error("头像上传失败:", error);
						uni.showToast({
							title: "网络异常，请稍后再试",
							icon: "none",
						});
					});
			},


			bindSexChange(event) {
				this.user.sex = event.detail.value; // 更新选中的性别值，保持为字符串
				uni.showToast({
					title: `性别选择: ${this.user.sex === "0" ? "男" : "女"}`,
					icon: 'none'
				});
			},
			// 保存
			saveUserInfo() {
				console.log("保存用户信息:", this.user);
				updateUserProfile(this.user).then(res => {
						// 成功后提示
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 2000
						});
					})
					.catch(error => {
						// 失败后提示
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none',
							duration: 2000
						});
					});
			},

			queryInfo() {
				getUserInfo().then(res => {
					this.user = {
						...res.data,
						sex: res.data.sex !== undefined ? String(res.data.sex) : this.user.sex // 保证 sex 为字符串
					};
					// console.log("用户信息:", this.user);
				});
			},
			goBack() {
				uni.switchTab({
					url: '/pages/my/my',
				});
			},
			showChangePasswordDialog() {
				this.showPasswordDialog = true; // 显示修改密码对话框
			},
			hidePasswordDialog() {
				this.showPasswordDialog = false; // 隐藏修改密码对话框
			},
			changePassword() {
				if (this.newPassword !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return;
				}

				console.log(this.oldPassword, this.newPassword);
				updateUserPwd(this.oldPassword, this.newPassword)
					.then(res => {
						console.log(res);
						// 假设 `res` 中有成功与否的信息
						if (res.code == 200) {
							uni.showToast({
								title: '密码修改成功',
								icon: 'success'
							});
							this.hidePasswordDialog(); // 修改成功后关闭对话框
						} else {
							uni.showToast({
								title: res.msg || '密码修改失败',
								icon: 'none'
							});
						}
					})
					.catch(error => {
						console.error('密码修改失败:', error);
						uni.showToast({
							title: '网络错误，请稍后再试',
							icon: 'none'
						});
					});
			},

		},
		onLoad() {
			this.queryInfo(); // 获取用户信息
		}
	}
</script>




<style>
	.changeInfo {
		width: 100%;
		height: 100%;
		/* background: #ffaaff; */
	}

	.nav-box {
		height: 50px;
		position: relative;
		margin: 0 auto;
		padding-top: 30px;
	}

	.title {
		text-align: center;
		color: #000000;
		font-size: 18px;
	}

	.icon-nav {
		position: absolute;
		top: 30px;
		left: 10px;
		color: #FFFFFF;
	}

	.box {
		width: 100%;
		height: 150px;
		margin: 0 auto;
		border-top: 1px solid #333333;
		border-bottom: 1px solid #333333;
	}

	.img-box {
		text-align: center;
	}

	.img {
		margin-top: 20px;
		width: 70px;
		height: 70px;
		border-radius: 50%;
	}

	.text {
		margin-top: 13px;
		color: #000000;
		font-size: 13px;
	}

	.info-box {
		padding: 0 10px;
	}

	.text-box {
		width: 100%;
		height: 52px;
		line-height: 52px;
		border-bottom: 1rpx dashed gainsboro;

	}

	.left {
		float: left;
		font-size: 15px;
		color: #000000;

	}

	.right {
		float: right;
		font-size: 15px;
		margin-right: 7px;
		color: #999999;

	}

	.icon-box {
		float: right;
		font-size: 15px;
		color: #999999;
		width: 10px;
	}

	.text-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.button-box {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	button {
		flex: 1;
		margin: 0 10px;
	}

	.radio-group {
		display: flex;
		/* 使用 flex 布局 */
		gap: 30px;
		/* 设置每个单选框之间的间距 */
		align-items: center;
		/* 确保单选框和文字垂直居中 */
	}

	.radio-container {
		display: flex;
		align-items: center;
		/* 单选框和文字垂直居中 */
	}

	.radio {
		margin-right: 5px;
		/* 单选框和文字之间的间距 */
	}

	.radio-label {
		font-size: 14px;
		color: #333;
	}

	.password-box {
		width: 200px;
		color: #ff6f61;
		border-bottom: 1px solid #f0f0f0;
	}

	.password-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		/* 遮罩层 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.dialog-content {
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		width: 80%;
		max-width: 400px;
		z-index: 100;
	}

	.dialog-title {
		font-size: 18px;
		margin-bottom: 10px;
		text-align: center;
	}

	.dialog-input-group {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.dialog-label {
		min-width: 80px;
		text-align: right;
		margin-right: 10px;
		font-size: 14px;
		color: #333;
	}

	.dialog-input {
		flex: 1;
		padding: 8px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.dialog-buttons {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		gap: 10px;
		/* 按钮间距 */
		margin-top: 20px;
		/* 按钮与上方内容的间距 */
	}

	.dialog-buttons button {
		width: 80px;
		/* 按钮宽度 */
		height: 35px;
		/* 按钮高度 */
		padding: 5px;
		/* 内边距调整 */
		border: none;
		/* 去掉边框 */
		background-color: #007aff;
		color: white;
		border-radius: 5px;
		/* 圆角按钮 */
		font-size: 14px;
		/* 字体大小 */
		display: flex;
		/* 启用弹性布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		cursor: pointer;
		/* 鼠标悬浮显示手型 */
	}


	.dialog-buttons button:nth-child(2) {
		background-color: #ccc;
		/* 第二个按钮颜色 */
	}


	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}
</style>